<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="./css/mui.min.css" rel="stylesheet">
		<style>
			body {
				width: 100%;
				height: 100%;
				margin: 0px;
				padding: 0px;
				background: #EDECEB;
			}
			
			.mui-content {
				height: 100%;
				background: #007AFF;
			}
		</style>

	</head>

	<body>

		<div class="mui-content">

			<div id="detailLayout" style="background: #EDECEB; padding-left: 4%; padding-right: 4%; padding-top: 10px; height: 100%; padding-bottom: 80px;">

				<p style="font-size: 16px; color:#FFA6A6A6;"> Order Number:</p>
				<p id="orderNo" style="font-size: 16px; color:#000000;">{{orderNo}} </p>

				<p style="font-size: 16px; color:#FFA6A6A6;"> Order Satus:</p>
				<p id="orderStatu" style="font-size: 16px; color:#000000;">{{orderStatu}}</p>

				<p style="font-size: 16px; color:#FFA6A6A6;"> Pickup Date:</p>
				<p style="font-size: 16px; color:#000000;">{{pickupDate}}</p>

				<p style="font-size: 16px; color:#FFA6A6A6;">Pickup Address:</p>
				<p style="font-size: 16px; color:#000000;">{{pickupAddress}}</p>

				<p style="font-size: 16px; color:#FFA6A6A6;">Pickup Attention:</p>
				<p style="font-size: 16px; color:#000000;">{{pickupAtten}}</p>

				<p style="font-size: 16px; color:#FFA6A6A6;">Pickup Remarks:</p>
				<p style="font-size: 16px; color:#000000;">{{pickupRemaek}}</p>

				<p style="font-size: 16px; color:#FFA6A6A6;">Delivery Date:</p>
				<p style="font-size: 16px; color:#000000;">{{delivaryDate}}</p>

				<p style="font-size: 16px; color:#FFA6A6A6;">Delivery Address:</p>
				<p style="font-size: 16px; color:#000000;">{{deliveryAddress}}</p>

				<p style="font-size: 16px; color:#FFA6A6A6;">Delivery Attention:</p>
				<p style="font-size: 16px; color:#000000;">{{deliveryAtten}}</p>

				<p style="font-size: 16px; color:#FFA6A6A6;">Delivery Remarks:</p>
				<p style="font-size: 16px; color:#000000;">{{deliveryRemark}}</p>

			</div>

		</div>

		<script src="js/mui.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/http.js"></script>
		<script type="text/javascript">
			(function($, doc) {

				mui.init();

				mui.plusReady(function() {

					var self = plus.webview.currentWebview();
					var orderno = self.orderNo;
					var orderStatu = self.statu;
					console.log("订单号-----> " + orderno);

					var orderDetail = new Vue({
						el: '.mui-content',
						data: {
							orderNo: "",
							orderStatu: "",
							pickupDate: "",
							pickupAddress: "",
							pickupAtten: "",
							pickupRemaek: "",
							delivaryDate: "",
							deliveryAddress: "",
							deliveryAtten: "",
							deliveryRemark: ""
						}
					});

					var detail = null;
					var getOrderDetail = function() {

						var postdata = {
							orderNo: orderno,
							token: 'f416b7333f412805f5f1def594bdcf93'
						};

						http.asyncHttp('getOrderDetails.jsp', postdata, function(result) {
								console.log("请求detail数据----> \r\n" + result);
								if(result == "" || result == null) {
									return;
								}
								detail = JSON.parse(result);

								orderDetail.orderNo = detail.orderNo;
								orderDetail.orderStatu = orderStatu;
								orderDetail.pickupDate = detail.pickupdate;
								orderDetail.pickupAddress = detail.pickupaddrl1 + ", " + detail.pickupaddrl2 + ", " + detail.pkpostalcode + " Singapore";
								orderDetail.pickupAtten = detail.pkcontact + ", " + detail.pkcontactno;
								if(detail.pkremarks == "" || detail.pkremarks == null) {
									orderDetail.pickupRemaek = "no remarks";
								} else {
									orderDetail.pickupRemaek = detail.pkremarks;
								}

								orderDetail.delivaryDate = detail.deliverydate;
								orderDetail.deliveryAddress = detail.deliveryaddrl1 + ", " + detail.deliveryaddrl2 + ", " + detail.dvpostalcode + " Singapore";
								orderDetail.deliveryAtten = detail.dvcontact + ", " + detail.dvcontactno;
								if(detail.dvremarks == "" || detail.dvremarks == null) {
									orderDetail.deliveryRemark = "no remarks";
								} else {
									orderDetail.deliveryRemark = detail.dvremarks;
								}
							},
							function(err) {
								plus.nativeUI.toast("请求出错了");

							});
					};

					getOrderDetail();

				});

			}(mui, document));
		</script>

	</body>

</html>